// 获取用户名和密码框
let phone = document.querySelector("#phone"); //输入手机号框
let checker_txing = document.querySelector("#checker_txing"); //六位数字
let yanzhengtxing = document.querySelector(".yanzhengtxing"); //六位数字点击框
let checker_str = document.querySelector("#checker_str"); //密码框
let get_checknum = document.querySelector("#get_checknum"); //获取验证码
let logphone_submit = document.querySelector("#logphone_submit"); //登录
let span = document.querySelector("#spans");
let psword = document.querySelector("#password");
let reg =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
/**
 * 要求：
 * 1.密码必须由字母、数字组成，区分大小写
 * 2.密码长度为8-18位
 */
let reg1 = /^(?![a-zA-Z]+$)(?![0-9]+$)[A-Za-z0-9]{8,18}$/;
/**
 * 声明这个变量的原因是为了校验是否清空phone的内容
 * 当点击phone事件时清空他的内容,重新填写
 * 当点击获验证码事件时不清空，phone的内容提示变为手机号码不正确，字体颜色变红
 */
let check = false;

// 注册和登录的切换
function change(val) {
  let zhuce = document.getElementById("zhuce");
  let denglu = document.getElementById("denglu");
  if (val == "zhuce") {
    zhuce.style.display = "block";
    denglu.style.display = "none";
  } else if (val == "denglu") {
    zhuce.style.display = "none";
    denglu.style.display = "block";
  }
}

phone.onclick = function () {
  if (check) {
    phone.value = "";
    phone.style.color = "";
    check = false;
  }
};

//首次进入页面自动调用方法加载验证码,此方法声明在../js/code.js内
code_draw();
// 点击后刷新验证码
$("#canvas").on("click", function () {
  code_draw();
});

/**
 * 点击获取验证码时验证手机号格式  密码  数字验证 验证码
 * 验证正确之后发起请求，验证手机号是否存在，如果存在则提示
 * 用户名可用
 *
 */

function SMS() {
  // 判断11位手机号码是否正确
  if (!reg.test(phone.value)) {
    phone.value = "手机号码错误!";
    phone.style.color = "red";
    check = true;
  } else if (!validatePassword()) {
  } else if (!checkVerif()) {
  } else {
    axios
      .get(checkusernameAPI, {
        params: { username: phone.value },
      })
      .then((res) => {
        let obj = res.data;
        console.log(obj);
        if (obj.code == 1) {
          alert("短信验证码为：" + num);
        } else {
          alert("手机号已注册，请使用密码登录");
        }
      });
  }
}

//校验手机号格式是否正确,失去焦点时触发
function checkPhoneFormat() {
  if (!reg.test(phone.value)) {
    phone.style.color = "red";
    return false;
  } else {
    return true;
  }
}

// 效验密码是否正确
function validatePassword() {
  if (reg1.test(psword.value)) {
    return true;
  } else {
    alert("密码必须由字母、数字组成，区分大小写,密码长度为8-18位");
    return false;
  }
}

//校验图片验证码是否匹配
function checkVerif() {
  // 将输入的内容转为大写，可通过这步进行大小写验证
  var val = $(".input-val").val().toLowerCase();
  // 获取生成验证码值
  var num = $("#canvas").attr("data-code");
  if (val == "") {
    alert("请输入验证码！");
    return false;
  } else if (val == num) {
    return true;
  } else {
    alert("验证码错误！请重新输入！");
    $(".input-val").val("");
    //验证码输入错误后，重新加载验证码。
    code_draw();
    return false;
  }
}
var num = "";
for (var i = 0; i < 6; i++) {
  num += Math.floor(Math.random() * 10);
}
//校验随机数验证码是否匹配
function checkNum() {
  if (checker_str.value == num) {
    return true;
  } else {
    alert("短信验证码输入错误！");
    return false;
  }
}

// let countdown = 60;
// settime();
// function settime() {
//   if (countdown == 0) {
//     get_checknum.value = "获取验证码";
//     countdown = 60;
//   } else {
//     get_checknum.value = countdown + "秒后重新发送";
//     countdown--;
//     setTimeout(settime(), 1000);
//   }

// }

/**
 * 注册
 * 点击注册按钮时，要在判断一下手机号 密码  图片验证  短信验证码是否都正确
 * 正确发起注册请求
 *
 * 注册成功后，提示手机号已注册，请使用密码登录
 * 可以使用密码登录
 */
function submit() {
  if (
    reg.test(phone.value) &&
    validatePassword() &&
    checkVerif() &&
    checkNum()
  ) {
    let username = phone.value;
    let password = psword.value;
    console.log(username);
    console.log(password);
    // alert("注册成功！");
    axios
      .get(regAPI, {
        params: { username: username, password: password },
      })
      .then((res) => {
        console.log(res);
        let { data } = res;
        console.log(data);
        // localStorage.setItem("username", data.data.username);
        // localStorage.setItem("password", data.data.password);
        alert(data.msg + "请使用密码登录");
        // location.href = "index.html";
      });
  }
}

/**
 * 登录
 * 用户点击登录时，
 */
// phone.onblur = function () {
//   if (reg.test(phone.value)) {
//     return true;
//   } else {
//     return false;
//   }
// };

// psword.onblur = function () {
//   if (reg1.test(psword.value)) {
//     return true;
//   } else {
//     return false;
//   }
// };


